<template>
  <div class="tou">
    <van-nav-bar title="电影" />
  </div>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
    </van-dropdown-menu>
  </div>
  <div>
    <dl v-for="item in xr">
        <dd>
            <p>{{item.title}}</p>
            <p class="hui">{{item.dz}}</p>
        </dd>
        <dd>
            <p class="hong">￥{{item.price}}起</p>
            <p>距离未知</p>
        </dd>
    </dl>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const value1 = ref(0);
    const value2 = ref('a');
    const value3 = ref('A');
    const option1 = [
      { text: '全城', value: 0 },
      { text: '新款商品', value: 1 },
      { text: '活动商品', value: 2 },
    ];
    const option2 = [
      { text: 'App订票', value: 'a' },
      { text: '好评排序', value: 'b' },
      { text: '销量排序', value: 'c' },
    ];
    const option3 = [
      { text: '最近去过', value: 'A' },
      { text: '好评排序', value: 'B' },
      { text: '销量排序', value: 'C' },
    ];


//渲染
let xr=[
    {title:'上海电影',dz:'红阿福阿富汗',price:45},
    {title:'上海电影',dz:'红阿福阿富汗',price:45},
    {title:'上海电影',dz:'红阿福阿富汗',price:45},
    {title:'上海电影',dz:'红阿福阿富汗',price:45},
    {title:'上海电影',dz:'红阿福阿富汗',price:45},
    {title:'上海电影',dz:'红阿福阿富汗',price:45},
    {title:'上海电影',dz:'红阿福阿富汗',price:45},
]
</script>

<style lang="scss" scoped>
.tou {
  width: 100%;
  height: 50px;
  position: sticky;
  top: 0;
  z-index: 99;
  background: white;
}
dl{
    width: 100%;
    height: 80px;
    border-bottom: solid 1px #ccc;
    display: flex;
}
dd{
    float: left;
}
dd p{
    margin-left: 20px;
}
.hui{
    color:#ccc;
}
.hong{
    color:#ff5f16;
}
</style>
